<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/qs.js"></script>
</head>

<body>

    <!-- 
        请求查询参数，http协议的规范，在路径地址上以?分割参数和路径，参数以描述参数名和参数值，多个参数直接以&符号进行隔开
        一般情况下，查询参数进行传值的是GET|DELETE这类无请求体请求
        form表单中默认使用get请求，参数会以查询方式进行发送
        请求查询参数:询参数以 `?`关键字拼接于请求地址之后，如下： http://ip地址:端口/XXX?key=value&key2=value2
    
     -->

    <input type="text" id="username">
    <input type="button" value="发送ajax查询参数" onclick="sendAjaxQueryStr()">
    <script>

        //自定义函数，该函数的功能将对象的格式转换为查询字符串的格式
        function trans(obj={}){
            let str="";
            for(let key in obj){
                str+=key+"="+obj[key]+"&";
            }
            return str.replace(/&$/,"");
        }
       
        function sendAjaxQueryStr() {


            let xhr = new XMLHttpRequest();
            // let username=document.getElementById("username").value;
            // xhr.open("get",`/params/getVal?username=${username}&age=30`);

            let user = {
                name: "alice",
                age: 20,
                sex: "男"
            };
            // 1.查询参数构成：使用路径拼接方式完成
            // xhr.open("get",`/params/getVal?username=${user.name}&age=${user.age}&sex=${user.sex}`);

            // 2.查询参数构成：参数可以以js对象进行定义，使用工具函数转换
            // xhr.open("get","/params/getVal?"+trans(user));

            // 3.使用三方插件提供的工具函数
            let queryStr=Qs.stringify(user);
            xhr.open("get","/params/getVal?"+queryStr);

            // 4.查询参数构成:使用w3c提供的URLSearchParams构造函数创建查询参数
            // let usp=new URLSearchParams();
            // usp.append("msg","hello");//增加查询参数
            // usp.append("username",'cici');
            // usp.append("age",20);
            // console.log("URLSearchParams对象，看不到参数，需要转换成字符串格式才能转换输出");
            // xhr.open("get","/params/getVal?"+usp);


            xhr.onload = function () {
                console.log(xhr.responseText);
            };
            xhr.send();
        }


    </script>
</body>

</html>